import Auth from '@/components/Auth'
import Home from '@/pages/Home'
import Layout from '@/pages/Layout'
import Login from '@/pages/Login'
import NotFound from '@/pages/NotFound'
import Test from '@/pages/Test'
import { lazy } from 'react'
import { useRoutes } from 'react-router-dom'

const Question = lazy(() => import('@/pages/Question'))
const Video = lazy(() => import('@/pages/Video'))
const Profile = lazy(() => import('@/pages/Profile'))
const Edit = lazy(() => import('@/pages/Profile/Edit'))
const Article = lazy(() => import('@/pages/ArticleDetail'))
const SearchPage = lazy(() => import('@/pages/Search'))
const SearchResult = lazy(() => import('@/pages/Search/Result'))
const Chat = lazy(() => import('@/pages/Chat'))
function Wrapper() {
  return useRoutes([
    {
      path: '/',
      element: (
        // <Auth>
        //   <Layout />
        // </Auth>
        // <Auth element={<Layout />}></Auth>
        <Layout />
      ),
      children: [
        {
          index: true,
          element: <Home />,
        },
        {
          path: '/question',
          element: <Question />,
        },
        {
          path: '/video',
          element: <Video />,
        },
        {
          path: '/profile',
          element: (
            <Auth>
              <Profile />
            </Auth>
          ),
        },
      ],
    },
    {
      path: '/login',
      element: <Login />,
    },
    {
      path: '/profile/edit',
      element: <Edit />,
    },
    {
      path: '/article/:art_id',
      element: <Article />,
    },
    {
      path: '/search',
      element: <SearchPage />,
    },
    {
      path: '/search/result/:q',
      element: <SearchResult />,
    },
    {
      path: '/chat',
      element: (
        <Auth>
          <Chat />
        </Auth>
      ),
    },
    {
      path: '/test',
      element: <Test />,
    },
    {
      path: '/*',
      element: <NotFound />,
    },
  ])
}

export default Wrapper
